<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>useContext</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>


<script type="text/babel">
  // 创建一个Context对象
  const CountContext = React.createContext(0)
  function A () {
    const [count, setCount] = React.useState(1)


    return (
      <div>
        <h1>A组件: {count}</h1>
        <button onClick={() => setCount(count => count + 1)}>增加1</button>
        <hr/>
        <CountContext.Provider value={count}>
          <B/>
        </CountContext.Provider>
        
      </div>
    )
  }

  

  function B() {
    return (
      <div>
        <h1>B组件</h1>
        <hr/>
        <C/>  
      </div>
    )
  }

  function C () {
    const count = React.useContext(CountContext)

    return (
      <h1>C组件: {count}</h1>
    )
  }

  ReactDOM.render(<A/>, document.getElementById('example'))

</script>
</body>
</html>

